<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
            overflow: hidden;
        }
        #wrap {
            position: fixed;
            right: 10px;
            bottom: 10px;
            width: 32px;
            height: 32px;
        }
        #wrap > .inner {
            height: 100%;
        }
        #wrap > .inner > svg {
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 50%;
            /*transition: 2s;*/
        }
        #wrap > .home {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            width: 100%;
            height: 100%;
            background: #eee url("img/add_line.png") no-repeat;
            border-radius: 50%;
            transition: 1s;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div class="inner">
        <svg t="1566529998481" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3159" width="32" height="32"><path d="M621.67 408.025c16.623-74.241 28.228-127.936 34.837-161.196 16.641-83.742-26.57-161.496-112.207-161.496-77.237 0-116.01 38.382-138.886 115.095l-0.582 2.248c-13.725 62.048-34.72 110.155-62.511 144.577-29.397 36.41-73.174 57.97-119.733 58.965l-21.904 0.468c-52.244 1.117-94.017 44.131-94.017 96.81v317.837c0 64.802 52.11 117.334 116.392 117.334h412.522c84.739 0 160.38-53.563 189.123-133.922l85.697-239.587c21.805-60.96-9.54-128.196-70.012-150.177a115.556 115.556 0 0 0-39.48-6.956H621.67z m-77.41-258.692c39.258 0 59.498 36.474 49.884 84.925-7.57 38.148-21.987 104.43-43.217 198.67-4.511 20.026 10.565 39.097 30.907 39.097h218.657c6.11 0 12.172 1.07 17.92 3.162 27.446 9.991 41.673 40.553 31.776 68.262l-85.57 239.587c-19.638 54.982-71.316 91.63-129.21 91.63H223.494c-29.176 0-52.827-23.877-52.827-53.333V503.495c0-17.86 14.142-32.444 31.83-32.823l21.87-0.468c65.088-1.394 126.285-31.576 167.38-82.551 34.347-42.605 59.146-99.315 74.865-169.877 15.487-51.444 32.941-68.443 77.649-68.443z" fill="#000000" p-id="3160"></path></svg>
        <svg t="1566530013495" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3277" width="32" height="32"><path d="M667.79 117.333c165.075 0 270.877 132.366 270.877 310.533 0 138.248-125.103 290.506-371.57 461.583-33.074 22.957-77.12 22.957-110.194 0-246.467-171.077-371.57-323.335-371.57-461.583 0-178.167 105.802-310.533 270.878-310.533 59.613 0 100.05 20.834 155.789 68.098 55.739-47.264 96.176-68.098 155.79-68.098z m0 63.147c-41.44 0-70.264 15.191-116.962 55.036-2.169 1.85-14.401 12.368-17.948 15.381-12.002 10.197-29.758 10.197-41.76 0-3.547-3.013-15.78-13.53-17.948-15.381-46.698-39.845-75.521-55.036-116.961-55.036-126.016 0-206.878 100.783-206.878 246.217 0 110.906 113.52 248.547 344.301 408.133 11.025 7.623 25.707 7.623 36.732 0 230.78-159.586 344.3-297.227 344.3-408.133 0-145.434-80.86-246.217-206.877-246.217z" fill="#000000" p-id="3278"></path></svg>
        <svg t="1566529982033" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3041" width="32" height="32"><path d="M693.333 170.667c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32h149.334c41.237 0 74.666 33.43 74.666 74.666v149.334c0 17.673-14.327 32-32 32-17.673 0-32-14.327-32-32V181.333c0-5.89-4.775-10.666-10.666-10.666H693.333z m160 522.666c0-17.673 14.327-32 32-32 17.673 0 32 14.327 32 32v149.334c0 41.237-33.43 74.666-74.666 74.666H693.333c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32h149.334c5.89 0 10.666-4.775 10.666-10.666V693.333z m-522.666 160c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H181.333c-41.237 0-74.666-33.43-74.666-74.666V693.333c0-17.673 14.327-32 32-32 17.673 0 32 14.327 32 32v149.334c0 5.89 4.775 10.666 10.666 10.666h149.334z m-160-522.666c0 17.673-14.327 32-32 32-17.673 0-32-14.327-32-32V181.333c0-41.237 33.43-74.666 74.666-74.666h149.334c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H181.333c-5.89 0-10.666 4.775-10.666 10.666v149.334zM800 480c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H224c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32h576z" fill="#000000" p-id="3042"></path></svg>
        <svg t="1566529966198" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2923" width="32" height="32"><path d="M336.013 916.625c-35.924 22.32-82.891 10.776-104.703-25.548-10.34-17.222-13.553-37.853-8.96-57.436l46.485-198.233c1.122-4.784-0.474-9.78-4.017-12.867L112.66 489.96c-31.603-27.538-35.257-75.654-8.238-107.738 13.03-15.474 31.628-25.113 51.724-26.752l199.709-16.286c4.35-0.355 8.243-3.232 10.027-7.595l76.94-188.168c16.03-39.202 60.618-57.911 99.513-41.455 18.527 7.838 33.194 22.757 40.84 41.455l76.94 188.168c1.784 4.363 5.677 7.24 10.027 7.595l199.708 16.286c41.883 3.416 72.89 40.453 69.574 82.516-1.584 20.094-10.942 38.777-26.088 51.974L761.181 622.54c-3.544 3.087-5.14 8.083-4.018 12.867L803.65 833.64c9.618 41.011-15.36 82.335-56.143 92.23-19.637 4.766-40.335 1.431-57.52-9.246l-170.979-106.23c-3.714-2.307-8.301-2.307-12.016 0l-170.978 106.23z m216.77-160.591L723.76 862.263c2.622 1.628 5.715 2.127 8.654 1.414 6.41-1.556 10.565-8.43 8.925-15.424L694.853 650.02c-6.521-27.811 2.809-57.02 24.284-75.732l152.156-132.58c2.482-2.162 4.059-5.31 4.33-8.75 0.562-7.13-4.494-13.17-10.974-13.699l-199.708-16.286c-28.487-2.323-53.198-20.585-64.065-47.16l-76.94-188.169c-1.268-3.1-3.634-5.507-6.537-6.735-5.902-2.497-12.733 0.37-15.336 6.735l-76.94 188.168c-10.867 26.576-35.579 44.838-64.065 47.161L161.349 419.26c-3.04 0.248-5.904 1.733-7.972 4.189-4.545 5.397-3.915 13.691 1.328 18.26l152.157 132.58c21.475 18.712 30.805 47.92 24.283 75.732L284.66 848.253c-0.793 3.382-0.238 6.95 1.52 9.877 3.478 5.793 10.578 7.538 16.059 4.133l170.978-106.23a75.291 75.291 0 0 1 79.567 0z" fill="#000000" p-id="2924"></path></svg>
        <svg t="1566529911823" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2805" width="32" height="32"><path d="M565.333 779.915l51.442-54.912c12.158-12.978 32.412-13.527 45.238-1.226 12.827 12.3 13.37 32.793 1.212 45.771L565.798 873.55c-14.24 15.159-37.87 15.767-52.816 1.395l-108.36-104.2c-12.81-12.318-13.326-32.812-1.15-45.773 12.175-12.961 32.43-13.482 45.24-1.164l52.621 50.602v-262.33c0-17.881 14.327-32.377 32-32.377 17.673 0 32 14.496 32 32.377v267.836zM512 138.667c123.022 0 228.212 86.709 259.427 206.877 92.876 1.61 167.24 80.55 167.24 177.148 0 97.598-75.913 177.173-170.134 177.173-17.673 0-32-14.496-32-32.377s14.327-32.377 32-32.377c58.358 0 106.134-50.08 106.134-112.42 0-62.338-47.776-112.419-106.134-112.419-5.85 0-11.628 0.498-17.3 1.482-17.627 3.055-34.308-9.1-37.03-26.983C698.357 280.69 612.715 203.42 512 203.42c-73.838 0-140.929 41.542-177.372 107.865-6.022 10.96-17.758 17.416-30.124 16.571a140.375 140.375 0 0 0-9.57-0.326c-80.155 0-145.6 68.603-145.6 153.79 0 85.188 65.445 153.79 145.6 153.79 17.673 0 32 14.496 32 32.377s-14.327 32.377-32 32.377c-116.018 0-209.6-98.097-209.6-218.544 0-118.311 90.293-215.058 203.45-218.451C338.093 186.24 421.02 138.667 512 138.667z" fill="#000000" p-id="2806"></path></svg>
    </div>
    <div class="home">

    </div>
</div>
</body>
<script type="text/javascript">
    /**
     * 在元素首次渲染没有完成的情况下 是不会触发渲染的
     * 绝大部分变换样式切换时 如果变换函数的个数 位置不相同也不会触发过渡
     */
    window.onload = function () {
        var home = document.querySelector('#wrap > .home')
        var svgs = document.querySelectorAll('#wrap > .inner > svg')
        var flag = true
        var c = 140
        home.onclick = function () {
            if (flag) {
                this.style.transform = 'rotate(-720deg)'
                for(var i = 0; i < svgs.length; i++) {
                    var deg = 270 - 90 * i / (svgs.length - 1)
                    svgs[i].style.transition = '2s '+(i * 0.2)+'s'
                    svgs[i].style.transform = 'rotate(-720deg) scale(1)'
                    svgs[i].style.left = getPoint(c, deg)['left']
                    svgs[i].style.top = getPoint(c, deg)['top']
                }
            } else {
                this.style.transform = 'rotate(0deg)'
                for(var i = 0; i < svgs.length; i++) {
                    svgs[i].style.transition = '2s '+((svgs.length - i -1) * 0.2)+'s'
                    svgs[i].style.transform = 'rotate(0deg) scale(1)'
                    svgs[i].style.left = '0px'
                    svgs[i].style.top = '0px'
                }
            }
            flag = !flag
        }
        
        // 已知第三边和一个角
        function getPoint(c, deg) {
            var x = Math.round(c * Math.sin(deg * Math.PI / 180)),
                y = Math.round(c * Math.cos(deg * Math.PI / 180))
            return {left: x+'px', top: y+'px'}
        }

        function transitionend() {
            this.style.transition = '0.5s '
            this.style.transform = 'rotate(-720deg) scale(1)'
            this.style.opacity = '1'
            // 解绑事件
            this.removeEventListener('transitionend', transitionend)
        }
        
        for(var i = 0; i < svgs.length; i++) {
            var svg = svgs[i]
            svg.onclick = function () {
                this.style.transition = '0.5s '
                this.style.transform = 'rotate(-720deg) scale(1.5)'
                this.style.opacity = '0.5'

                this.addEventListener('transitionend', transitionend)
            }
        }
    }
</script>
</html>
